<template>
  <div class="login_page">
    <div class="login">
      <div class="login_title">欢迎使用城市申请管理平台</div>
      <div class="login_tabs">
        <a-tabs v-model:activeKey="activeKey" style="width: 200px">
          <a-tab-pane key="1" tab="密码登录"> </a-tab-pane>
          <a-tab-pane key="2" tab="手机验证码登录"> </a-tab-pane>
        </a-tabs>
      </div>
      <a-form
        :form="form"
        @finish="onFinish"
        style="max-width: 70%; margin: auto; padding: 20px"
      >
        <a-form-item
          
          name="user_acc"
         
        >
          <a-input placeholder="请输入用户名" v-model="user_acc" />
        </a-form-item>

        <a-form-item
         
          name="psd"
         
        >
          <a-input-password placeholder="请输入密码" v-model="psd" />
        </a-form-item>

        <a-form-item
         
          name="captcha"
          
        >
          <div style="display: flex; align-items: center">
            <a-input
              v-model="captcha"
              placeholder="请输入验证码"
              style="flex: 1"
            />
            <a-button style="margin-left: 10px" @click="getCaptcha"
              >获取验证码</a-button
            >
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" style="height: 40px;width: 100%;" @click="handleSubmit"> 登录 </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeKey = ref("1");
const email = ref("");
const psd = ref("");

const form = ref(null);
const user_acc = ref("");
const captcha = ref("");

const getCaptcha = () => {
  console.log("获取验证码");
};

const onFinish = () => {
  console.log("登录成功");
  handleSubmit();
};

const handleSubmit = () => {
  window.sessionStorage.setItem("login_state", '1');
  router.push("/");
};


</script>

<style scoped>
@import "./index.css";
.login {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 55vh;
  width: calc(55vh * 1.3);
  margin: 0 20px;
  /* 设置目标比例 */
  /* aspect-ratio: 6/10;
  width: 60vw;
  height: 60vh;

  max-width: calc(100vh * (16/9)); 
  max-height: calc(100vw / (16/9)); 

  overflow: hidden; */

  margin-top: 20vh;
}
.login_title {
  height: 3.5rem;
  text-align: center;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 3.5rem;
  color: #535353;
}
.login_tabs {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>